html
复制代码
<!DOCTYPE html>

<html lang="zh">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Flexbox 模拟表格</title>

  <style>
    /* CSS样式 */
    .flex-table {
      border: 1px solid #ddd;
    }

    .flex-table>div {
      display: flex;
      flex-direction: row;
      /* flex: 1 0 20%; */
      /* 根据需要调整宽度 */
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      padding: 10px;
    }

    .flex-table>div:nth-child(5n) {
      border-right: none;
      /* 移除最后一个单元格的右边框 */
    }

    .flex-header {
      background-color: #f2f2f2;
      font-weight: bold;
    }

    .flex-row {
      display: flex;
      justify-content: space-between;
    }

    /* 假设有一个“万相”的类来突出某些部分 */
    .wanxiang {
      font-weight: bold;
    }

    .col-1 {
      flex: 0 0 200px;
    }
  </style>

</head>

<body>
  <div class="flex-table">
    <div class="flex-header">
      <span class="col-1"></span>
      <span class="col-1">编号/客户</span>
      <span class="col-1">所属区域</span>
      <span class="col-1">报价人/时间</span>
      <span class="col-1">配置</span>
      <span class="col-1">方式/年限</span>
      <span class="col-1">价格</span>
    </div>
    <div>
      <span class="col-1" class="wanxiang">
        <div>
          <div class="icon">懂法</div>
          <div class="right-main">
            <div class="right-main-text">
              <span>万象</span>
              <span>
                <span>新购</span>
                <span>+</span>
              </span>
            </div>
            <span class="icon-desc">运营商行业标准版</span>
          </div>
        </div>
      </span>
      <span class="col-1" class="wanxiang">QT-202012220156<br>祝延彬</span>
      <span class="col-1">东区金融</span>
      <span class="col-1">新东方教育科技集团有限公司<br>2020-12-15 13:26</span>
      <div class="col-1" class="flex-row">
        <span>产品价</span>
        <span>运营商行业标准版</span>
      </div>
      <span class="col-1">按年, 3年</span>
      <span class="col-1">￥9,850,000<br>￥128,05,000</span>
    </div>
    <!-- 以下是第二个订单和第三个订单的类似结构，根据需要添加 -->
    <!-- ... -->

  </div>
</body>

</html>